<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <h1>🔧 代理测试页面</h1>
    
    <div class="test-section">
        <h2>1. 测试代理API调用</h2>
        <p>测试通过Vite代理访问后端API</p>
        <button onclick="testProxyAPI()">测试代理API (/api/v1/items/93)</button>
        <div id="proxy-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>2. 测试直接API调用</h2>
        <p>测试直接访问后端API（可能会跨域失败）</p>
        <button onclick="testDirectAPI()">测试直接API (http://localhost:8080/api/v1/items/93)</button>
        <div id="direct-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>3. 当前环境信息</h2>
        <button onclick="showEnvironmentInfo()">显示环境信息</button>
        <div id="env-result" class="result"></div>
    </div>

    <script>
        // 测试代理API调用
        async function testProxyAPI() {
            const resultDiv = document.getElementById('proxy-result');
            resultDiv.textContent = '正在测试代理API调用...';
            resultDiv.className = 'result';
            
            try {
                console.log('🔄 开始测试代理API调用');
                const response = await fetch('/api/v1/items/93', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                console.log('📡 代理API响应状态:', response.status);
                
                if (response.ok) {
                    const data = await response.json();
                    console.log('✅ 代理API调用成功:', data);
                    resultDiv.textContent = `✅ 代理API调用成功!\n状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                    resultDiv.className = 'result success';
                } else {
                    console.error('❌ 代理API调用失败:', response.status, response.statusText);
                    resultDiv.textContent = `❌ 代理API调用失败\n状态码: ${response.status}\n错误信息: ${response.statusText}`;
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                console.error('❌ 代理API调用异常:', error);
                resultDiv.textContent = `❌ 代理API调用异常:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 测试直接API调用
        async function testDirectAPI() {
            const resultDiv = document.getElementById('direct-result');
            resultDiv.textContent = '正在测试直接API调用...';
            resultDiv.className = 'result';
            
            try {
                console.log('🔄 开始测试直接API调用');
                const response = await fetch('http://localhost:8080/api/v1/items/93', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                console.log('📡 直接API响应状态:', response.status);
                
                if (response.ok) {
                    const data = await response.json();
                    console.log('✅ 直接API调用成功:', data);
                    resultDiv.textContent = `✅ 直接API调用成功!\n状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                    resultDiv.className = 'result success';
                } else {
                    console.error('❌ 直接API调用失败:', response.status, response.statusText);
                    resultDiv.textContent = `❌ 直接API调用失败\n状态码: ${response.status}\n错误信息: ${response.statusText}`;
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                console.error('❌ 直接API调用异常:', error);
                resultDiv.textContent = `❌ 直接API调用异常:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 显示环境信息
        function showEnvironmentInfo() {
            const resultDiv = document.getElementById('env-result');
            const info = {
                '当前URL': window.location.href,
                '协议': window.location.protocol,
                '主机': window.location.host,
                '端口': window.location.port,
                '路径': window.location.pathname,
                '查询参数': window.location.search,
                'Hash': window.location.hash,
                '用户代理': navigator.userAgent
            };
            
            resultDiv.textContent = Object.entries(info)
                .map(([key, value]) => `${key}: ${value}`)
                .join('\n');
            resultDiv.className = 'result success';
            
            console.log('🌍 环境信息:', info);
        }
        
        // 页面加载时自动显示环境信息
        window.addEventListener('load', () => {
            console.log('📄 代理测试页面已加载');
            showEnvironmentInfo();
        });
    </script>
</body>
</html>